import React, {
	PureComponent
} from 'react'
import { connect } from 'dva'
import { Form, Button, DatePicker } from 'antd'
import Grid from '@/components/Grid'
import Select from '@/components/Select'
import settings, { getPagination } from '@/settings'
import { mapping } from '@/utils'

@connect(({
	logs: {
		list = {},
		params
	},
	loading
}) => ({
	list,
	params,
	loading: loading.effects['logs/fetchAll'],
}))
@Form.create()
class LogsPage extends PureComponent {
	levels = [{
		name: <span className="text-danger">错误</span>,
		text: '错误',
		value: 0
	}, {
		name: <span className="text-warning">警告</span>,
		text: '警告',
		value: 1
	}, {
		name: <span className="text-success">信息</span>,
		text: '信息',
		value: 2
	}, {
		name: <span className="text-info">调试</span>,
		text: '调试',
		value: 3
	}];
	columns = [{
		title: '序号',
		width: 50,
		dataIndex: '',
		align: 'center',
		render: (v, record, index) => {
			return index + 1
		}
	}, {
		title: '日志内容',
		dataIndex: 'text',
		resizable: true,
		width: 300
	}, {
		title: '操作用户',
		dataIndex: 'cruser',
		width: 120,
		align: 'center'
	}, {
		title: '日志类别',
		dataIndex: 'level',
		width: 120,
		align: 'center',
		render: (v, record, index) => {
			return mapping(v, this.levels)
		}
	}, {
		title: '操作时间',
		dataIndex: 'crtime',
		width: 150,
		align: 'center'
	}];
	componentDidMount() {
		const {
			dispatch
		} = this.props;
		dispatch({
			type: 'logs/fetchAll',
		});
	};
	handleGridChange = (oldPagination, sorter) => {
		const { params, dispatch } = this.props;
		
		const pagination = getPagination(oldPagination)
		const payload = {
			...params,
			...pagination
		}

		if (sorter.field) {
			payload.sorter = sorter.field
			payload.order = sorter.order
		}

		dispatch({
			type: 'logs/fetchAll',
			payload,
		})
	};
	handleReload = () => {
		const { params, dispatch } = this.props;
		dispatch({
			type: 'logs/fetchAll',
			payload: params
		})
	};
	handleSubmit = e => {
		e.preventDefault()

		const {
			form
		} = this.props

		form.validateFields((err, values) => {
			const { params, dispatch } = this.props;
			const pagination = getPagination({
				pageNumber: 1
			})
			const {
				startDate,
				endDate
			} = values
			dispatch({
				type: 'logs/fetchAll',
				payload: {
					...params,
					...pagination,
					...values,
					startDate: startDate ? startDate.format('YYYY-MM-DD HH:mm:ss') : null,
					endDate: startDate ? endDate.format('YYYY-MM-DD HH:mm:ss') : null
				}
			})
		})
	};
	render() {
		const {
			params,
			form: {
				getFieldDecorator
			},
			loading,
			list: {
				data,
				total
			}
		} = this.props

		const pageNumber = params[settings.pageNumber]

		const options = this.levels.map(_ => <Select.Option key={_.value} value={_.value}>{_.text}</Select.Option>)
		return (
			<div className="x-wrap">
				<div className="x-panel">
					<div className="x-toolbar">
						<div className="x-query">
							<Form layout="inline" onSubmit={this.handleSubmit}>
								<Form.Item label="开始时间">
						            {getFieldDecorator('startDate')(
						              <DatePicker
						                showTime
						                placeholder="请选择"
						                format="YYYY-MM-DD HH:mm:ss"
						              />
						            )}
					          	</Form.Item>
					          	<Form.Item label="结束时间">
						            {getFieldDecorator('endDate')(
						              <DatePicker
						                showTime
						                placeholder="请选择"
						                format="YYYY-MM-DD HH:mm:ss"
						              />
						            )}
					          	</Form.Item>
					          	<Form.Item label="日志级别">
						            {getFieldDecorator('level')(
						              // <Select placeholder="请选择" style={{width: 100}}>
						              //   <Select.Option value="0">错误</Select.Option>
						              //   <Select.Option value="1">警告</Select.Option>
						              //   <Select.Option value="2">信息</Select.Option>
						              //   <Select.Option value="3">调试</Select.Option>
						              // </Select>
						              <Select style={{width: 100}}>
						              	{options}
						              </Select>
						            )}
						        </Form.Item>
					          	<Form.Item>
						            <Button type="primary" htmlType="submit">查询</Button>
						        </Form.Item>
							</Form>
						</div>
					</div>
					<div className="x-fixed">
						<Grid 
						columns={this.columns} 
						data={data}
						loading={loading}
						pagination={{
							pageNumber,
							total
						}}
						onReload={this.handleReload}
						onChange={this.handleGridChange} />
					</div>
				</div>
			</div>
		)
	}
}

export default LogsPage